<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>区域管理</title>
	<meta name="decorator" content="default"/>
	<%@include file="/WEB-INF/views/include/treetable.jsp" %>
	<script type="text/javascript">
		$(document).ready(function() {
			var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
			var data = ${fns:toJson(list)}, rootId = "0";
			addRow("#treeTableList", tpl, data, rootId, true);
			$("#treeTable").treeTable({expandLevel : 5});
			
			layui.use(['laypage', 'form'], function(){
				  form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
				  form.render();
			}); 
		});
		function addRow(list, tpl, data, pid, root){
			for (var i=0; i<data.length; i++){
				var row = data[i];
				if ((${fns:jsGetVal('row.parentId')}) == pid){
					$(list).append(Mustache.render(tpl, {
						dict: {
							type: getDictLabel(${fns:toJson(fns:getDictList('sys_area_type'))}, row.type)
						}, pid: (root?0:pid), row: row
					}));
					addRow(list, tpl, data, row.id);
				}
			}
		}
	</script>
</head>
<body  style="padding: 10px;">
	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
	<ul class="layui-tab-title">
		<li class="layui-this"><a href="${ctx}/sys/area/">区域列表</a></li>
		<shiro:hasPermission name="sys:area:edit"><li><a href="${ctx}/sys/area/form">区域添加</a></li></shiro:hasPermission>
	</ul>
	 <div class="layui-tab-content"></div>
	</div>
	<sys:message content="${message}"/>
	<div class="layui-input-block" style="width:1250px; margin-left: 0;">
	<table id="treeTable" class="layui-table" style="align:left">
		<thead>
<!-- 			<tr> -->
<!-- 				<th width="70" lay-data="{field:'name',width:'129'}">区域名称</th> -->
<!-- 				<th width="70" lay-data="{field:'code',width:'129'}">区域编码</th> -->
<!-- 				<th width="170" lay-data="{field:'type',width:'129'}">区域类型</th> -->
<!-- 				<th width="70" lay-data="{field:'remarks',width:'129'}">备注</th> -->
<%-- 				<shiro:hasPermission name="sys:area:edit"> --%>
<!-- 				<th width="170" lay-data="{field:'操作',width:'179'}">操作</th> -->
<%-- 				</shiro:hasPermission> --%>
<!-- 			</tr> -->
			<tr>
				<th style="width:250" lay-data="{field:'name'}">区域名称</th>
				<th style="width:250" lay-data="{field:'code'}">区域编码</th>
				<th style="width:250" lay-data="{field:'type'}">区域类型</th>
				<th style="width:250" lay-data="{field:'remarks'}">备注</th>
				<shiro:hasPermission name="sys:area:edit">
				<th style="width:250" lay-data="{field:'操作'}">操作</th>
				</shiro:hasPermission>
			</tr>
		</thead>
		<tbody id="treeTableList"></tbody>
	</table>
	
	<script type="text/template" id="treeTableTpl">
		<tr id="{{row.id}}" pId="{{pid}}">
			<td><a class="layui-blue" href="${ctx}/sys/area/form?id={{row.id}}">{{row.name}}</a></td>
			<td>{{row.code}}</td>
			<td>{{dict.type}}</td>
			<td>{{row.remarks}}</td>
			<shiro:hasPermission name="sys:area:edit"><td>
				<a class="layui-btn layui-btn-xs" lay-event="edit" href="${ctx}/sys/area/form?id={{row.id}}">修改</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" href="${ctx}/sys/area/delete?id={{row.id}}" onclick="return confirmx('要删除该区域及所有子区域项吗？', this.href)">删除</a>
				<a class="layui-btn layui-btn-normal layui-btn-xs" href="${ctx}/sys/area/form?parent.id={{row.id}}">添加下级区域</a> 
			</td></shiro:hasPermission>
		</tr>
	</script>
	</div>
</body>
</html>